<template>
  <!-- <view class="popupCommonBox custom-popup"> -->
  <uni-popup
    ref="popup"
    class="custom-popup"
    :style="{
      'z-index': zIndex,
      'position':'fixed'
    }"
    :mask-background-color="maskBackgroundColor"
    :safe-area="false"
    @maskClick="close(0)"
    :is-mask-click="maskClick"
  >
    <view class="boxTitle" v-if="title" :style="{ background: background, fontWeight: fontWeight }">
      <view>{{ title }}</view>
      <image
        v-if="showClose"
        @click="close(0)"
        class="popupClose"
        src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/close_gray.png"
      />
    </view>
    <view class="topOption" v-if="showTopOption">
      <view class="cancel view" @click="close(0)">取消</view>
      <view class="topOptionTitle view" v-if="topOptionTitle">{{ topOptionTitle }}</view>
      <view class="sure view" @click="close(1)">确认</view>
    </view>
    <slot name="top"></slot>
    <scroll-view scroll-y class="scrollBox" :class="title?'':'active'" :style="{ background: background, maxHeight: maxHeight, borderRadius: borderRadius }">
        <slot></slot>
    </scroll-view>
    <slot name="footer"></slot>
    <view v-if="showSureBtn" class="sureBtn" @click="close">
      <view class="view">确定</view>
    </view>
  </uni-popup>
  <!-- </view> -->
</template>

<script>
export default {
  props: {
    borderRadius:{
      type: String,
      default: "0",
    },
    fontWeight: {
      type: String,
      default: "",
    },
    title: {
      //弹框title
      type: String,
      default: "",
    },
    showSureBtn: {
      //是否显示底部确认按钮 默认不显示
      type: Boolean,
      default: false,
    },
    showTopOption: {
      //是否显示顶部确认按钮 默认不显示
      type: Boolean,
      default: false,
    },
    topOptionTitle: {
      type: String,
      default: "",
    },
    showClose: {
      //是否显示顶部关闭图标 默认不显示
      type: Boolean,
      default: false,
    },
    background: {
      type: String,
      default: "#FFFFFF",
    },
    zIndex: {
      type: String,
      default: "11",
    },
    maxHeight: {
      type: String,
      default: "65vh",
    },
    maskBackgroundColor: {
      type: String,
      default: "rgba(0,0,0,0.4)",
    },
    maskClick: {
      type: Boolean,
      default: true,
    }
  },
  components: {},
  data() {
    return {
      lucencyData: "",
    };
  },
  onLoad() {},
  methods: {
    openPopup(position, lucencyData) {
      this.$refs.popup.open(position);
      if (typeof lucencyData == "object") {
        this.lucencyData = JSON.parse(json.stringify(lucencyData));
      } else {
        this.lucencyData = lucencyData;
      }
    },
    closePopup(code) {
      if(code){
        this.$emit("close", 1);
      }else{
        this.$emit("close", this.lucencyData);
      }
      this.$refs.popup.close();
    },
    open(position, lucencyData) {
      this.$refs.popup.open(position);
      if (typeof lucencyData == "object") {
        this.lucencyData = JSON.parse(json.stringify(lucencyData));
      } else {
        this.lucencyData = lucencyData;
      }
    },
    close(code) {
      this.$refs.popup.close();
      if(code){
        this.$emit("close", 1);
      }else{
        this.$emit("close", this.lucencyData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popupCommonBox {
  background: #fff;
}
.custom-popup {
  max-height: 85vh;
  width: 100vh;
}
.boxTitle {
  position: relative;
  height: 104rpx;
  text-align: center;
  color: $sl-color-black;
  font-size: 36rpx;
  font-weight: 600;
  line-height: 102rpx;
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;

  .popupClose {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 32rpx;
    top: 30rpx;
  }
}

.topOption {
  display: flex;
  align-items: center;
  height: 130rpx;
  justify-content: space-between;
  background: #fff;
  border-radius: 48rpx 48rpx 0 0;

  .view {
    padding: 0 40rpx;
    font-weight: 400;
    font-size: 30rpx;
    line-height: 46rpx;
  }
  .cancel {
    color: #B5B5D2;
  }
  .sure {
    color: #404062;
  }
  .topOptionTitle {
    font-weight: 500;
    font-size: 36rpx;
    color: $sl-color-black;
    line-height: 50rpx;
  }
}

.scrollBox {
  max-height: 65vh;
  background: #ffffff;
  margin-top: -2rpx;
  overflow: hidden;
}
.scrollBox.active{
  border-radius: 30rpx 30rpx 0 0;
}
.sureBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  height: 140rpx;
  .view {
    width: 670rpx;
    height: 80rpx;
    border-radius: 4rpx;
    border: 2rpx solid #707070;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    color: #000000;
    font-weight: 600;
  }
}
</style>
